<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>其他收入</span>
    </div>
    <div class="home-container">
      <div class="clearfix">
        <v-searchForm
          :form-data="filter_info"
          :form-title="formTitle"
          @search="search"
          @reset="reset"
        />
      </div>
      <v-tableBtns
        :table-title="exportTitle"
        :table-data="exportData"
        :on-export="handleExport"
        :show-export="true"
        title="其他收入"
      />
      <v-table
        ref="table"
        :table-title="tableTitle"
        :table-data="tableData"
        :header-cell-style="changeStyle"
        @sortChange="sortChange"
        @del="del"
        @edit="edit"

      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />

    </div>
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import { parseTime } from '../../../utils'
  import auth from '@/mixins/auth'
  import { $get } from '@/utils/newRequest'

  export default {
    name: '',
    mixins: [auth],
    components: { UploadExcelComponent },
    data() {
      const now = new Date()
      now.setTime(now.getTime() - 3600 * 1000 * 24 * (now.getDate() - 1))
      const startTime = parseTime(now, '{y}-{m}-{d}')
      const endTime = parseTime(new Date(now.getFullYear(), now.getMonth() + 1, 0), '{y}-{m}-{d}')
      return {
        uploadUrl: process.env.BASE_API + 'action/WechatAdvs/saveFile',
        index: [false, false, false],
        formTitle: [
          {
            cn: '登记人',
            en: 'fans_name'
          },
          {
            cn: '项目类型',
            en: 'project_type',
            type: 'select',
            list: [
              {
                label: '代运营',
                value: '代运营'
              },
              {
                label: '线下活动',
                value: '线下活动'
              },
                 {
                label: 'TVC视频',
                value: 'TVC视频'
              }
            ]
          },
          {
            cn: '客户公司全称',
            en: 'client_company_full_name',
          },
           {
            cn: '客户公司简称',
            en: 'client_company_abbreviation',
          },
          {
            cn: '发布时间：',
            en: 'created_at',
            type: 'time'
          }
        ],
        filter_info: {
          // created_at: [startTime, endTime]
        },
        originFilter: {
          // created_at: [startTime, endTime]
        },
        tableTitle: [
          {
            cn: 'id',
            en: 'id',
            // sortable: true
          },
          {
            cn: '登记人',
            en: 'name',
            // sortable: true
          },
          {
            cn: '项目类型',
            en: 'project_type',
            // sortable: true
          },
          {
            cn: '客户公司全称',
            en: 'client_company_full_name',
            // sortable: true
          },{
            cn: '客户公司简称',
            en: 'client_company_abbreviation',
            // sortable: true
          },
          {
            cn: '我方公司合同主体',
            en: 'subject_of_contract'
          },
          {
            cn: '项目起始日期',
            en: 'start_date'
          },
          {
            cn: '项目终止日期',
            en: 'end_date'
          },
          {
            cn: '合同金额',
            en: 'contract_amount',
            // sortable: true
          },
          {
            cn: '代运营项目',
            en: 'agent_operation_type',
            // sortable: true
          },
          {
            cn: '分期月数',
            en: 'months_by_stages',
            // sortable: true
          },
          {
            cn: '采购成本',
            en: 'procurement_cost'
          },
            {
            cn: '备注',
            en: 'remarks' ,

          },
        ],
        exportTitle: [],
        tableData: [],
        exportData:[],
        // 排序
        sidx: 'start_date',
        sortKey: null,

        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        }
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.start_time = origin[key][0]
            data.end_time = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.end_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
      this.exportTitle = this.tableTitle.concat([
           {
            cn: '收款',
            en: 'money'
          },
        {
            cn: '收款账户',
            en: 'bank_account',
            // sortable: true
          },
          {
            cn: '收款银行',
            en: 'bank',
            // sortable: true
          },
            {
            cn: '收款时间',
            en: 'create_date',
            // sortable: true
          },

            {
            cn: '发票号',
            en: 'bill_num' ,

          },
           {
            cn: '开票公司',
            en: 'bill_company'
          },
            {
            cn: '开票金额',
            en: 'bill_price',
          },
        ])
    },
    methods: {
      changeStyle({ row, column, rowIndex, columnIndex }) {
        console.log(row, column, rowIndex, columnIndex)
      },
      getTableList() {
        const loading = this.$loading()

        const datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          // sidx: this.sidx,
          // sortKey: this.sortKey,

        }
        this.$get('action/OtherIncome/get_list', datas)
          .then(res => {
            let list
            const data = res.data
            if (data.list && data.list.length) {
              list = data.list
            }
            this.pageInfo.totalPage = data.totalPage
            this.pageInfo.totalRow = data.totalRow

            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },
        handleExport() {
        $get('action/OtherIncome/get_export', {
            // sidx: 'publish_at',
            ...this.filter_infos})
          .then(res => {
            new Promise((resolve, reject) => {
              let datas = res.data;
              // let list = datas.map((item, index) => {
              //   const obj = item
              //   obj.is_bill = item.is_bill ? '是' : '否';
              //   obj.is_book = item.is_book ? '是' : '否';
              //   obj.is_contract = item.is_contract ? '是' : '否';
              //   obj.return_point = obj.return_point?(obj.return_point+'%'):''
              //   obj.private_return_point = obj.private_return_point?(obj.private_return_point+'%'):''
              //   obj.subsidiary_point = obj.subsidiary_point?(obj.subsidiary_point+'%'):''
              //   if  (item.groups_name == '城觅抖音'){
              //    obj.media_type = item.media_type ? '直播' : '短视频';
              //    obj.order_form = item.order_form
              //    // obj.order_form = item.order_form ? '代下单' : '星图下单';
              //   }
              //   else{
              //    obj.media_type = '';
              //    obj.order_form = '';
              //    }
              //   switch (item.subsidiary_type) {
              //     case 0:
              //       obj.fenxiao = obj.subsidiary_point;
              //       obj.yongjin = '';
              //       break;
              //     case 1:
              //       obj.fenxiao = '';
              //       obj.yongjin = obj.subsidiary_point;
              //       break;
              //     default:
              //       obj.fenxiao = '';
              //       obj.yongjin = '';
              //       break;
              //   }
              //   try {
              //     const extend = item.extend && JSON.parse(item.extend)
              //     extend && extend.forEach(item => {
              //       obj[item.label_name] = item.value
              //     })
              //   } catch (e) {
              //     //订单号3129返回的extend字段不完整
              //     return obj
              //   }
              //   return obj
              // })
              resolve(datas)
            }).then(list => {
              this.exportData = list || []
            }).catch(err => {
              this.exportData = []
            })
          }).catch(_ => {
          this.$message({
            message: '导出超时',
            type: 'error'
          })
          this.exportData = []

        })
      },

      // 搜索
      search() {
        this.pageInfo.pageNumber = 1
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.index = []
        this.getTableList()
      },

      del(val) {
        const data = { id: val.row.id }
        this.$post('action/OtherIncome/del', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
          .catch(_ => {

          })
      },
      upload() {
        // this.$router.push({
        //   name: 'adv_order.upload'
        // })
      },

      edit(val) {
        const details = JSON.stringify(val.row)
        this.$router.push({
          name: 'adv_order.other_income_info',
          query: { details}
        })
      },
      addnew() {
        console.log(1)
      },
      // 排序
      sortChange({ column, prop, order }) {
        this.sidx = prop || 'publish_at'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
